<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, watch } from 'vue'
import { useDicts } from '@/utils/dict'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
  },
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const title = ref(props.title)
const formVisible = ref(false)
const formData = ref(props.data)
const { sys_oper_type } = useDicts('sys_oper_type')

const closeDialog = () => {
  formVisible.value = false
}

function selectDictLabel(datas, value) {
  if (value === undefined) {
    return ''
  }
  const actions = []
  Object.keys(datas).some((key) => {
    if (datas[key].value == '' + value) {
      actions.push(datas[key].label)
      return true
    }
  })
  if (actions.length === 0) {
    actions.push(value)
  }
  return actions.join('')
}

const emit = defineEmits(['update:visible'])
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val)
  }
)

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val
  }
)

watch(
  () => props.title,
  (val) => {
    title.value = val
  }
)

watch(
  () => props.data,
  (val) => {
    formData.value = val
  }
)
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    :width="780"
    draggable
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form ref="ruleFormRef" :model="formData" label-width="100px" class="break-all">
      <el-row>
        <el-col :span="12">
          <el-form-item label="操作模块："
            >{{ formData.title }} /
            {{ selectDictLabel(sys_oper_type, formData.businessType) }}</el-form-item
          >
          <el-form-item label="登录信息："
            >{{ formData.operName }} / {{ formData.operIp }} /
            {{ formData.operLocation }}</el-form-item
          >
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求地址：">{{ formData.operUrl }}</el-form-item>
          <el-form-item label="请求方式：">{{ formData.requestMethod }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="操作方法：">{{ formData.method }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请求参数：">
            <vue-json-pretty
              :data="JSON.parse(formData.operParam)"
              :deep="3"
              :show-double-quotes="true"
              :show-line="false"
              :show-length="false"
              :show-icon="true"
              :show-line-number="false"
              :editable="true"
              editable-trigger="click"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!-- <el-form-item label="返回参数：">{{
            formData.jsonResult
          }}</el-form-item> -->
          <el-form-item label="返回参数：">
            <vue-json-pretty
              :data="JSON.parse(formData.jsonResult)"
              :deep="3"
              :show-double-quotes="true"
              :show-line="false"
              :show-length="false"
              :show-icon="true"
              :show-line-number="false"
              :editable="true"
              editable-trigger="click"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作状态：">
            <div v-if="formData.status === 0">正常</div>
            <div v-else-if="formData.status === 1">失败</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作时间：">{{ dayjs(formData.operTime) }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="formData.status === 1" label="异常信息：">{{
            formData.errorMsg
          }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
    </template>
  </el-dialog>
</template>
